/**投票 */
import React, { useState } from 'react';
import {
  Collapse,
  Form,
  Row,
  Col,
  DatePicker,
  Input,
  Button,
  Select,
  Upload,
  message,
} from 'antd';
import {
  PlusOutlined,
  DeleteOutlined,
  LoadingOutlined,
  InfoCircleFilled,
} from '@ant-design/icons';
import type { RcFile } from 'antd/es/upload/interface';

import styles from './index.less';

const { Panel } = Collapse;
const { RangePicker }: { RangePicker: any } = DatePicker;
const { Option } = Select;

const beforeUpload = (file: RcFile) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};

const Vote = (props: { VoteForm: any }) => {
  const { VoteForm } = props;

  const [loading, setLoading] = useState(false);

  //图片上传
  const normFile = (e: any) => {
    if (e.file.status === 'uploading') {
      setLoading(true);
    } else {
      setLoading(false);
    }

    if (Array.isArray(e)) {
      return e;
    }

    return e?.fileList;
  };

  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>添加图片</div>
    </div>
  );
  //投票方式
  const [votingMethod, setVotingMethod] = useState('');
  const handleChange = (value: string) => {
    setVotingMethod(value);
  };
  return (
    <div>
      <Collapse
        className={styles['site-collapse-custom-collapse']}
        defaultActiveKey={['Vote']}
      >
        <Panel
          header="投票"
          key="Vote"
          className={styles['site-collapse-custom-panel']}
        >
          <Form
            form={VoteForm}
            name="1"
            initialValues={{ remember: true }}
            autoComplete="off"
            layout="vertical"
          >
            <div
              style={{
                fontSize: 14,
                fontWeight: 700,
                marginBottom: 30,
              }}
            >
              基本信息
            </div>
            <Row>
              <Col span={12}>
                <Form.Item
                  label="活动时间"
                  name="voteDate"
                  rules={[
                    {
                      required: true,
                      message: 'Please input your username!',
                    },
                  ]}
                >
                  <RangePicker showTime style={{ width: 400 }} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="投票方式"
                  name="voteWay"
                  rules={[
                    {
                      required: true,
                      message: 'Please input your username!',
                    },
                  ]}
                >
                  <Select
                    style={{ width: 400 }}
                    placeholder="请输入投票方式"
                    onChange={handleChange}
                  >
                    <Option value="1">只可投一次</Option>
                    <Option value="2">每日均可投</Option>
                  </Select>
                </Form.Item>
              </Col>
            </Row>
            {votingMethod === '2' && (
              <Row>
                <Col span={12}>
                  <Form.Item
                    label="每日可投上限"
                    name="dayVoteLimit"
                    rules={[
                      {
                        required: true,
                        message: 'Please input your username!',
                      },
                    ]}
                  >
                    <Input
                      placeholder="请输入1~9999999的整数"
                      style={{ width: 400 }}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    label="重复投票上限"
                    name="singlePlayerLimit"
                    rules={[
                      {
                        required: true,
                        message: 'Please input your username!',
                      },
                    ]}
                  >
                    <Input
                      placeholder="请输入1~9999999的整数"
                      style={{ width: 400 }}
                    />
                  </Form.Item>
                </Col>
              </Row>
            )}

            <div
              style={{
                fontSize: 14,
                fontWeight: 700,
                marginBottom: 30,
              }}
            >
              投票对象
            </div>

            <Row>
              <Col span={12}>
                <Form.Item
                  label="名称"
                  name="name"
                  rules={[{ required: true, message: 'Missing first name' }]}
                >
                  <Input
                    style={{ width: 400, marginRight: 10 }}
                    placeholder="请输入投票对象的名称"
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <div style={{ display: 'flex' }}>
                  <Form.Item
                    label="说明"
                    name="instructions"
                    rules={[
                      {
                        required: true,
                        message: 'Missing first name',
                      },
                    ]}
                  >
                    <Input
                      style={{ width: 400, marginRight: 10 }}
                      placeholder="请输入投票对象的说明"
                    />
                  </Form.Item>
                </div>
              </Col>
            </Row>

            <Form.Item
              name="votePicture"
              label="活动图"
              rules={[
                {
                  required: true,
                  message: 'Please input your username!',
                },
              ]}
              valuePropName="fileList"
              getValueFromEvent={normFile}
              extra={
                <div>
                  <InfoCircleFilled />
                  &nbsp; 支持扩展名：jpg，jpeg，png
                </div>
              }
            >
              <Upload
                name="multipartFile"
                listType="picture-card"
                action="/campus/campusweb/upload/pictureUpload"
                beforeUpload={beforeUpload}
                maxCount={1}
              >
                {uploadButton}
              </Upload>
            </Form.Item>
            <Form.List name="voteObjectVOS">
              {(fields, { add, remove }) => (
                <>
                  {fields.map(({ key, name, ...restField }) => (
                    <div key={key}>
                      <div
                        style={{
                          fontSize: 14,
                          fontWeight: 700,
                          marginBottom: 30,
                        }}
                      >
                        投票对象
                      </div>

                      <Row>
                        <Col span={12}>
                          <Form.Item
                            label="名称"
                            {...restField}
                            name={[name, 'name']}
                            rules={[
                              { required: true, message: 'Missing first name' },
                            ]}
                          >
                            <Input
                              style={{ width: 400, marginRight: 10 }}
                              placeholder="请输入投票对象的名称"
                            />
                          </Form.Item>
                        </Col>
                        <Col span={12}>
                          <div style={{ display: 'flex' }}>
                            <Form.Item
                              label="说明"
                              {...restField}
                              name={[name, 'instructions']}
                              rules={[
                                {
                                  required: true,
                                  message: 'Missing first name',
                                },
                              ]}
                            >
                              <Input
                                style={{ width: 400, marginRight: 10 }}
                                placeholder="请输入投票对象的说明"
                              />
                            </Form.Item>
                            <DeleteOutlined
                              onClick={() => remove(name)}
                              style={{ color: 'red ', alignSelf: 'center' }}
                            />
                          </div>
                        </Col>
                      </Row>

                      <Form.Item
                        name={[name, 'votePicture']}
                        label="活动图"
                        rules={[
                          {
                            required: true,
                            message: 'Please input your username!',
                          },
                        ]}
                        valuePropName="fileList"
                        getValueFromEvent={normFile}
                        extra={
                          <div>
                            <InfoCircleFilled />
                            &nbsp; 支持扩展名：jpg，jpeg，png
                          </div>
                        }
                      >
                        <Upload
                          name="multipartFile"
                          listType="picture-card"
                          action="/campus/campusweb/upload/pictureUpload"
                          beforeUpload={beforeUpload}
                          maxCount={1}
                        >
                          {uploadButton}
                        </Upload>
                      </Form.Item>
                    </div>
                  ))}
                  <Form.Item>
                    <Button
                      type="dashed"
                      onClick={() => add()}
                      block
                      icon={<PlusOutlined />}
                    >
                      添加
                    </Button>
                  </Form.Item>
                </>
              )}
            </Form.List>
          </Form>
        </Panel>
      </Collapse>
    </div>
  );
};
export default Vote;
